<template>
  <button
    class="btn enabled:(active:(shadow-sm ) hover:(shadow-lg brightness-110)) disabled:(cursor-not-allowed pointer-events-none)"
    :class="btnCls"
    type="button"
    :disabled="disabled"
    @click="onClick"
  >
    <slot></slot>
  </button>
</template>
<script lang="ts" setup>
import { computed, PropType } from "vue";
import { Size, CSSColor } from "./types";

import { useDebounceFn } from "@vueuse/core";
const sizeStyle = {
  small: "text-xs p-1",
  regular: "text-sm p-2",
  large: "text-base p-3",
} as Record<Size, string>;

const props = defineProps({
  size: {
    type: String as PropType<Size>,
    default: "regular",
  },
  outline: Boolean,
  disabled: Boolean,
  debounceMs: {
    type: Number,
    default: 250,
  },
});
const emit = defineEmits(["click"]);

const btnCls = computed<string[]>(() => [
  sizeStyle[props.size],
  props.outline
    ? "bg-transparent border-2 border-primary text-primary"
    : "bg-primary text-base-100",
]);
// z-button debounce click
const onClick = useDebounceFn((event: MouseEvent) => {
  emit("click", event);
}, props.debounceMs);
</script>
<style>
/*
.z-btn {
  --at-apply: inline-flex justify-center items-center font-bold rounded active:shadow-sm transition duration-300 ease-in-out;
  background: v-bind(background);
  background-position: center;
  transition: background 0.8s;
  color: v-bind(color);
}
.z-btn:hover {
  background: v-bind(background) radial-gradient(circle, transparent 1%, v-bind(background) 1%) center/15000%;
  filter: brightness(1.2);
}
.z-btn:active {
  background-color: v-bind(background);
  background-color: brightness(v-bind(background));
  background-size: 100%;
  transition: background 0s;
}
/* .ripple {
   background-position: center;
   transition: background 0.8s;
}
.ripple:hover {
  background: #47a7f5 radial-gradient(circle, transparent 1%, #47a7f5 1%) center/15000%;
}
.ripple:active {
  background-color: #6eb9f7;
  background-size: 100%;
  transition: background 0s;
} */
</style>
